<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .menu {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .menu li {
            display: inline-block;
            position: relative;
            padding-bottom: 10px; /* 底部留出空间给横线 */
            margin-right: 15px;
        }

        .menu li a {
            text-decoration: none;
            color: #333;
        }

        .menu li::after {
            display: block;
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 2px;
            background-color: #ff2720; /* 横线颜色 */
            transform: scaleX(0); /* 初始状态为隐藏 */
            transition: transform 0.3s ease-in-out; /* 过渡动画效果 */
        }

        .menu li:hover::after {
            transform: scaleX(1); /* 鼠标 hover 状态下显示横线 */
        }
    </style>
</head>
<body>
    <ul class="menu">
        <li><a href="#">菜单项1</a></li>
        <li><a href="#">菜单项2</a></li>
        <li><a href="#">菜单项3</a></li>
        <li><a href="#">菜单项4</a></li>
        <li>
            <a href="#">菜单项5</a>

        </li>
    </ul>
</body>
</html>